<template>
  <div class="chat-container">
    <div class="chat-header">
      <h2>章若楠 小助手</h2>
    </div>
    <div class="chat-messages" ref="messagesContainer">
      <img src="@/assets/img.png" class="avatar" alt="avatar" />
      <div style="margin-left: 60px;margin-top: 10px" v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
        <div class="message-content">{{ message.content }}</div>
      </div>
      <!-- 加载指示器 -->
      <el-skeleton v-if="isProcessing" :rows="6" animated />

    </div>
    <div class="chat-input">
      <input
          v-model="inputText"
          @keypress.enter="sendMessage"
          placeholder="输入消息..."
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const inputText = ref('');
const messages = ref([]);
const messagesContainer = ref(null);
const isProcessing = ref(false); // 加载状态

// 发送消息到后端 API
const sendMessage = async () => {
  if (!inputText.value.trim()) return;
  // 添加用户消息到对话历史
  messages.value.push({
    sender: 'user',
    content: inputText.value,
  });

  // 清空输入框
  const userInput = inputText.value;
  inputText.value = '';

  // 滚动到底部
  scrollToBottom();

  // 显示加载指示器
  isProcessing.value = true;

  try {
    // 调用后端 API
    const response = await axios.post('http://127.0.0.1:8080/deepseek/ask', {
      question: userInput,
    });

    // 添加 AI 回复到对话历史
    messages.value.push({
      sender: 'ai',
      content: response.data,
    });
  } catch (error) {
    console.error('Error:', error);
    messages.value.push({
      sender: 'ai',
      content: '抱歉，服务暂时不可用，请稍后再试。',
    });
  } finally {
    // 隐藏加载指示器
    isProcessing.value = false;
    scrollToBottom();
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

// 初始化时显示欢迎消息
onMounted(() => {
  messages.value.push({
    sender: 'ai',
    content: '你好！我是章若楠，请问有什么可帮您？',
  });
  scrollToBottom();
});
</script>

<style scoped>
.avatar{
  border-radius: 50%;
  height:50px;
  width:50px;
  background-size: cover;
  margin-bottom: 10px;
  position: absolute;
}
.chat-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.chat-header {
  background-color: #42b983;
  color: white;
  padding: 15px;
  text-align: center;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f5f5;
  position: relative;
}

.message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  max-width: 80%;
  word-wrap: break-word;
}

.message.user {
  background-color: #e0e0e0;
  align-self: flex-end;
  margin-left: auto;
}

.message.ai {
  background-color: #ffffff;
  align-self: flex-start;
  margin-right: auto;
}

.chat-input {
  display: flex;
  padding: 15px;
  background-color: white;
  border-top: 1px solid #e0e0e0;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-right: 10px;
}

.chat-input button {
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #3aa879;
}

/* 加载指示器样式 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #42b983;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
